<!-- 导航 -->
<template>
  <!-- unfold参数 控制导航收放 -->
  <el-aside
    class="nav_bl"
    :width="unfold?(64+'px'):(200+'px')"
  >
    <el-menu
      unique-opened
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="rgb(64, 158, 255)"
      :collapse="unfold"
      :default-active="activeIndex"
      :collapse-transition="true"
      router
    >
      <div
        class="bu_unfold"
        @click="unfold = !unfold"
      >
        <i class="el-icon-s-unfold" />
      </div>
      <!-- 二级导航,判断是多项还是单项和是否有权限 -->
      <div
        v-for="(item,n) in menulist"
        :key="item.id"
      >       
        <!-- 多项 -->
        <el-submenu
          v-if="item.hasOwnProperty('children') && isPower(item.id)" 
          :index="item.id + ''"
        >
          <template slot="title">
            <i :class="icoList[n] || 'el-icon-circle-plus-outline'" /><span
              v-show="!unfold"
              class="title"
            >{{ item.authName }}</span>
          </template> 
          <!-- 三级导航,判断是多项还是单项 -->
          <div
            v-for="child in item.children"
            v-show="isPower(child.id)"
            :key="child.id"
          >
            <!-- 多项 -->
            <el-submenu
              v-if="child.hasOwnProperty('children')"
              :index="child.id + ''"
            >
              <template slot="title">
                {{ child.authName }}
              </template>
              <el-menu-item
                v-for="childItem in child.children"
                :key="childItem.id"
                :index="childItem.path" 
              >
                {{ childItem.authName }}
              </el-menu-item>
            </el-submenu> 
            <!-- 单项 -->
            <el-menu-item 
              v-else           
              :index="child.path"
            >
              {{ child.authName }}
            </el-menu-item>
          </div>          
        </el-submenu>
        <!-- 单项 (item.path为访问URL)-->
        <el-menu-item
          v-else-if="isPower(item.id)"
          :index="item.path"
        >
          <i :class="icoList[item.id]" /><span
            v-show="!unfold"
            class="title"
          >{{ item.authName }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </el-aside>
</template>

<!-- 内容管理导航 -->
<script>
    import { menulist,icoList } from "../../config/nav.config" //导航配置
    export default {
        data() {
            return {
                activeIndex: '/manage/content/banner',                
                unfold: false, // 是否收起
                menu:[], // 导航权限
                /* 
                  导航相关配置请前往config/nav.config.js配置 
                */
                menulist, // 内容管理导航
                icoList // 内容管理导航图标
            }            
        },
        mounted: function () {
            var hash = location.hash.split('/')            
            hash = hash[hash.length - 1]
            this.activeIndex = hash

            this.getContentPower(); //获取内容导航权限
        },
        methods:{
          //获取导航权限数据
          getContentPower:async function(){
            const {data:res} = await this.$http.get('roles');
            this.menu = res.find(function(item){//sessionStorage
              return item.username === sessionStorage.getItem('username')
            }).content.split(',') 
          },
          //权限开头
          isPower:function(id){    
            this.menu.ddd = id       
            return true //this.menu.includes(id)
          }           
        }

    }

</script>
<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

    .iconfont {
        margin-right: 6px;
        font-size: 18px;
    }
    .nav_bl {background: rgb(84, 92, 100);}
    
</style>
